import { BusinessOverview, EChartLineOption, LiTableOption } from "@/api/interface";
import { GetBusinessOverview } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { Delete, Search } from "@element-plus/icons-vue";
import LiLineChart from "@/components/LiLineChart";
import LiTable from "../../components/LiTable";

declare type param = {
  dataTimeRange: string;
};

export default defineComponent({
  name: "Overview",
  setup(): () => JSX.Element {
    /* data */
    let param = reactive<param>({
      dataTimeRange: formatDate(0, "end", "yyyy-MM-dd")
    });

    let EChartOption = reactive<EChartLineOption>({
      xArray: [],
      yArray: [],
      title: "营业趋势"
    });

    let tableOption = reactive<LiTableOption>({
      data: [],
      maxHeight: 480,
      columns: [
        {
          sortable: true,
          prop: "name",
          label: "餐段"
        },
        {
          sortable: true,
          prop: "orderCount",
          label: "订单量"
        },
        {
          sortable: true,
          prop: "total",
          label: "营业额"
        },
        {
          sortable: true,
          prop: "sumAmount",
          label: "营业收入"
        }
      ]
    });

    let dataReport = ref<BusinessOverview | null>();

    let coreData = ref<
      {
        text: string;
        value: any;
      }[]
    >([]);

    let consumeArray = ref<
      {
        text: string;
        value: any;
      }[][]
    >([]);

    /* methods */
    const GetPageData: () => void = async () => {
      dataReport.value = (await GetBusinessOverview(param)).data;
      let trendChar = dataReport.value.trendChar;
      EChartOption.xArray = trendChar.map(l => l.day.slice(5, 17));
      EChartOption.yArray = trendChar.map(l => l.amount);
      tableOption.data = dataReport.value.marketList;

      // coreData.value = [
      //   [
      //     {
      //       text: `营业收入(元)`,
      //       value: dataReport.value.sumAllAmount.toFixed(2)
      //     },
      //     {
      //       text: `较上周营业收入`,
      //       value: dataReport.value.compareSumAllAmount.toFixed(2)
      //     }
      //   ],
      //   [
      //     {
      //       text: `营业额(元)`,
      //       value: dataReport.value.sumAmount.toFixed(2)
      //     },
      //     {
      //       text: `较上周营业额`,
      //       value: dataReport.value.compareSumAmount.toFixed(2)
      //     }
      //   ],
      //   [
      //     {
      //       text: `优惠金额(元)`,
      //       value: dataReport.value.discountAmount.toFixed(2)
      //     },
      //     {
      //       text: `较上周优惠金额`,
      //       value: dataReport.value.compareDiscount.toFixed(2)
      //     }
      //   ],
      //   [
      //     {
      //       text: `订单量(单)`,
      //       value: dataReport.value.orderCount.toFixed(2)
      //     },
      //     {
      //       text: `较上周订单数`,
      //       value: dataReport.value.compareOrderCount.toFixed(2)
      //     }
      //   ]
      // ];

      coreData.value = [
        {
          text: `营业收入(元)`,
          value: dataReport.value.sumAllAmount.toFixed(2)
        },
        {
          text: `较上周营业收入`,
          value: dataReport.value.compareSumAllAmount.toFixed(2)
        },
        {
          text: `营业额(元)`,
          value: dataReport.value.sumAmount.toFixed(2)
        },
        {
          text: `较上周营业额`,
          value: dataReport.value.compareSumAmount.toFixed(2)
        },
        {
          text: `优惠金额(元)`,
          value: dataReport.value.discountAmount.toFixed(2)
        },
        {
          text: `较上周优惠金额`,
          value: dataReport.value.compareDiscount.toFixed(2)
        },
        {
          text: `订单量(单)`,
          value: dataReport.value.orderCount.toFixed(2)
        },
        {
          text: `较上周订单数`,
          value: dataReport.value.compareOrderCount.toFixed(2)
        }
      ];

      consumeArray.value = dataReport.value.consumeIndex.map(l => [
        {
          text: l.title,
          value: l.value
        },
        {
          text: "较上周",
          value: parseFloat(l.compareValue.split(" ")[1]).toFixed(2)
        }
      ]);
    };

    const search: () => void = async () => {
      await GetPageData();
    };

    async function reset(): Promise<void> {
      param.dataTimeRange = formatDate(0, "end", "yyyy-MM-dd");
      await GetPageData();
    }

    /* life circle */
    onMounted(async function (): Promise<void> {
      await GetPageData();
    });

    /* html */
    return () => (
      <div class="overview-container">
        <div style="margin-bottom: 10px" class="card table-box">
          <el-form inline={true} model={param} style="padding-top: 20px">
            <el-form-item label="日期：">
              <el-date-picker
                v-model={param.dataTimeRange}
                type="date"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                clearable={false}
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon={Search} onClick={search}>
                搜索
              </el-button>
              <el-button icon={Delete} onClick={reset}>
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div
          // class="mb10"
          style={{
            display: "flex",
            justifyContent: "space-between"
          }}
        >
          {coreData.value.map(l => (
            <div
              style={{
                width: "10%"
              }}
            >
              <div
                class="card"
                style={{
                  borderRadius: `4px`,
                  height: "150px",
                  marginBottom: "10px",
                  display: `flex`,
                  flexDirection: "column",
                  alignItems: `center`,
                  justifyContent: `center`
                }}
              >
                <div
                  style={{
                    fontSize: `16px`,
                    color: "#333"
                  }}
                >
                  {l.text}
                </div>
                <div
                  style={{
                    marginTop: `15px`,
                    fontSize: `18px`,
                    color: `#fdc31d`
                  }}
                >
                  {l.value}
                </div>
              </div>
            </div>
          ))}

          {/* {coreData.value.map(l => (
            <div
              style={{
                width: "10%"
              }}
            >
              {l.map(o => (
                <div
                  class="card"
                  style={{
                    borderRadius: `4px`,
                    height: "150px",
                    marginBottom: "10px",
                    display: `flex`,

                    alignItems: `center`,
                    justifyContent: `center`
                  }}
                >
                  <div
                    style={{
                      fontSize: `18px`,
                      fontWeight: `bold`
                    }}
                  >
                    {o.text}
                  </div>
                  <div
                    style={{
                      marginTop: `15px`,
                      fontSize: `18px`,
                      color: `#fdc31d`
                    }}
                  >
                    {o.value}
                  </div>
                </div>
              ))}
            </div>
          ))} */}
        </div>
        <div class="card mb10">
          <LiLineChart height={480} title={EChartOption.title} xArray={EChartOption.xArray} yArray={EChartOption.yArray} />
        </div>
        <div
          // class="mb10"
          style={{
            display: "flex",
            justifyContent: "space-between"
          }}
        >
          {consumeArray.value.map(l => (
            <div
              style={{
                width: "10%"
              }}
            >
              {l.map(o => (
                <div
                  class="card"
                  style={{
                    borderRadius: `4px`,
                    height: "100px",
                    marginBottom: "10px",
                    display: `flex`,
                    flexDirection: `column`,
                    alignItems: `center`,
                    justifyContent: `center`
                  }}
                >
                  <div
                    style={{
                      fontSize: `15px`,
                      color: "#333"
                    }}
                  >
                    {o.text}
                  </div>
                  <div
                    style={{
                      marginTop: `18px`,
                      fontSize: `16px`,
                      color: `#fdc31d`
                    }}
                  >
                    {o.value}
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
        <div class="card mb10">
          <LiTable data={tableOption.data} columns={tableOption.columns} maxHeight={tableOption.maxHeight} />
        </div>
      </div>
    );
  }
});
